import { useDispatch, useSelector } from '@umijs/max';
import { Card, Tabs } from 'antd';
import { useEffect } from 'react';
import Table from './Table';

const App = () => {
  const dispatch = useDispatch();
  const { activeKey } = useSelector((state) => state.aftersales);

  useEffect(() => {
    dispatch({
      type: 'aftersales/getAfterSaleAcount',
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    dispatch({
      type: 'aftersales/selectByPage',
    }); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const items = [
    {
      key: '9',
      label: '全部',
      children: <Table key="9" />,
    },
    {
      key: '1',
      label: '待审核',
      children: <Table key="1" />,
    },
    {
      key: '2',
      label: `打款中`,
      children: <Table key="2" />,
    },
    {
      key: '3',
      label: `打款成功`,
      children: <Table key="3" />,
    },
    {
      key: '4',
      label: `已驳回`,
      children: <Table key="4" />,
    },
    {
      key: '5',
      label: `打款失败`,
      children: <Table key="5" />,
    },
  ];

  return (
    <Card size="small">
      <Tabs
        size="small"
        defaultActiveKey="1"
        activeKey={activeKey}
        // destroyInactiveTabPane
        items={items}
        onChange={(key) => {
          dispatch({
            type: 'aftersales/update',
            payload: {
              activeKey: key,
              // searchForm: {},
              pageSize: 10,
              pageNum: 1,
            },
          });
          dispatch({
            type: 'aftersales/selectByPage',
          });
        }}
      />
    </Card>
  );
};
export default App;
